.chessboard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-wrap: wrap;
    width: 540px; // 棋盘宽度  
    height: 540px; // 棋盘高度  
    background-color: rgb(222, 179, 139); // 棋盘背景色
    .chessboard-row {
        display: flex;
        cursor: pointer;
        width: 100%;
        height: 5%;
        .chessboard-col {
            height: 100%;
            width: 5%;
            .chessboard-cell {
                display: flex;
                align-items: flex-end;
                justify-content: flex-end;
                width: 100%;
                height: 100%;
                border: 1px solid #76747498;
                .chessboard-cell-click {
                    position: absolute;
                    z-index: 98;
                    width: 20px;
                    height: 20px;
                    margin-right: -10px;
                    margin-bottom: -10px;

                }

                .chessboard-cell-black,
                .chessboard-cell-white {
                    width: 20px;
                    height: 20px;
                    z-index: 99;
                    margin-right: -10px;
                    margin-bottom: -10px;
                    border-radius: 50%;
                }

                //黑棋
                .chessboard-cell-black {
                    background-color: #333333;
                    box-shadow: 0px 1px 3px 2px #0808081d;
                }

                //白棋
                .chessboard-cell-white {
                    background-color: #fff;
                    box-shadow: 0px 1px 3px 2px rgba(226, 226, 226, 0.641);
                }
            }
        }
    }
}